<template>
  <div>
    <common-head title="商品详情页" />
    <div class="content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in detail.pics" :key="banner.id">
          <img :src="banner.pic" alt />
        </van-swipe-item>
      </van-swipe>
      <h2 v-if="detail.basicInfo">{{detail.basicInfo.name}}</h2>
      <!-- 渲染富文本 -->
      <!-- {{ detail.content }} -->
      <div class="rich-text" v-html="content"></div>
    </div>
    <!-- 商品规格 -->
    <van-popup closeable round v-model="show" position="bottom" :style="{ height: '40%' }">
      <div class="item-card">
        <van-card :num="sku.num" :price="sku.minPrice" :title="sku.name" :thumb="sku.pic">
          <template #footer>
            <van-stepper v-model="sku.num" />
          </template>
        </van-card>
        <van-button size="large" @click="confirm" color="#f66">确定</van-button>
      </div>
    </van-popup>
    <!-- /商品规格 -->
    <!-- 底部行动栏 -->
    <van-goods-action>
      <van-goods-action-icon @click="$router.push('/home')" icon="wap-home-o" text="首页" />
      <van-goods-action-icon @click="$router.push('/cart')" icon="cart-o" text="购物车" 
        :badge="_items.length||''" />
      <van-goods-action-button type="warning" @click="showSku(1)" text="加入购物车" />
      <van-goods-action-button type="danger" @click="showSku(0)" text="立即购买" />
    </van-goods-action>
    <!-- /底部行动栏 -->
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchItem } from 'api'
import { mapState } from 'vuex'
import cartMixin from 'mixins/addCartMixin'
export default {
  data () {
    return {
      detail: {
        content: ''
      },
      show: false,
      sku: {
        num: 1, // 购买数量或者加入购物车数量 默认为1
        checked: true
      },
      actionBtn: 1 // 1加入购物车 0 立即购买
    }
  },
  mixins: [cartMixin],
  created () {
    this.fetchItem()
  },
  methods: {
    confirm () {
      // 点击 sku 确认按钮
      if (this.actionBtn) {
        // 加入购物车
        this._add_cart(this.sku)
      } else {
        alert('立即购买')
      }
    },
    showSku (n) {
      // 点击弹出 商品规格
      this.actionBtn = n
      this.show = true
    },
    fetchItem () {
      fetchItem({ id: this.$route.params.itemId }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.detail = res.data.data
          this.sku = {
            // 商品规格数据  浅克隆
            ...this.sku,
            ...res.data.data.basicInfo
          }
        }
      })
    }
  },
  components: { CommonHead },
  computed: {
    ...mapState({
      _items: (state) => state.cart.cart.items
    }),
    content () {
      return this.detail.content.replace(
        /<img/g,
        '<img style="vertical-align:bottom"'
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: 46px;
  margin-bottom: 50px;
  .my-swipe {
    img {
      width: 100%;
    }
  }
}
/* .rich-text {
 /deep/ img{
    vertical-align: bottom;
  }
} */
.item-card {
  background-color: #fafafa;
  height: 100%;
  /deep/ .van-card {
    padding-top: 20px;
  }
}
</style>
